<script setup>
import { ref } from "vue";
defineProps({
  title: {
    type: String,
    default: "标题",
  },
  width: {
    type: String,
    default: "30%",
  },
  show: Boolean,
});
const emit = defineEmits(["update:show"]);
</script>
<template>
  <teleport to="body">
    <div class="modal" v-if="show" @click.self="emit('update:show', false)">
      <div class="modal-container" :style="{ width, minHeight: width }">
        <div class="modal-title">
          <b>{{ title }}</b> <span @click.self="emit('update:show', false)">x</span>
        </div>
        <slot></slot>
        <slot name="footer"></slot>
      </div>
    </div>
  </teleport>
</template>

<style lang="scss" scoped>
.modal {
  width: 100vw;
  height: 100vh;
  display: flex;
  background: rgba($color: #000000, $alpha: 0.6);
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  .modal-container {
    padding: 20px;
    background: #fff;
  }
  .modal-title {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    b {
      font-size: 20px;
    }
  }
}
</style>
